<template>
<!--个人信息页面-->
 
	<view >
		<!--用户头像-->
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		 
		<!--用户昵称-->
		<input type="nickname" class="weui-input" placeholder="请输入昵称" @bindblur="changeNickName"/>
		<button @click="console.log(this.nickname)">aa</button>
	</view>
	
	
	<button class="btn" @click="login">注册/登录</button>
</template>

<script>
	import config from "../utils/config.js"
	const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

	export default {
		data() {
			return {
				avatarUrl: defaultAvatarUrl,
				nickname: ''
			}
		},
		methods: {
			onChooseAvatar(e){
				this.avatarUrl = e.detail.avatarUrl
			},
			changeNickName(e) {
				console.log(e)
				let name = e.detail.value;
				if (name.length === 0) return;
				this.nickname = e.detail.value
		 },

			login() {
				let that = this
				//判断缓存中是否有用户数据（也就是判断有没有登录）
				if (!uni.getStorageSync('userData')) {
					uni.login({
						provider:"weixin",
						success: function(event){
							console.log(event)
							//开始登录
							that.request({
								url: config.baseUrl + "/xcx/getOpenId",
								data: {
									code: event.code,
									avatarUrl: that.avatarUrl,
									nickName: that.nickname,
								}
							}).then(res => {
								console.log(res)
							})
						},
						fail: function(e){
							uni.showToast({
								title: '授权失败',
								icon: 'none',
								duration:2000
							});
						},
					})
					
				} else {
					console.log('登陆过了')
				}
				console.log(uni.getStorageSync('userData'))
			},
		},
	}
</script>

<style lang="scss">
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}
 
.avatar {
  display: block;
  width: 56px;
  height: 56px;
}
 
.weui-input{
	text-align: center;
	height: 100rpx;
	font-size: 40rpx;
	background-color: white;
}
.btn{
	margin-top: 10rpx;
	margin-left: 225rpx;
	text-align: center;
	width: 40%;
}
</style>